import React, { Component } from 'react'

import PropTypes from 'prop-types'

function ChildCpn(props) {
  const { name, age } = props
  const { names } = props

  return (
    <div>
      <h2>Subcomponents present data: {name + ' ' + age}</h2>
      <ul>
        {
          names.map((item, index) => <li key={index}>{item}</li>)
        }
      </ul>
    </div>
  )
}

class ChildCpn2 extends Component {
  // es6中的lass fidlds写法 
  static propTypes = {

  }

  static defaultProps = {

  }

  render() {
    return (
      <div></div>
    )
  }
}

ChildCpn.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
  names: PropTypes.array.isRequired
}

ChildCpn.defaultProps = {
  name: 'L'
}

export default class App extends Component {
  render() {
    return (
      <div>
        <ChildCpn age={20} names={['a', 'b', 'c']} />
        <ChildCpn name="王总" age={20} names={['c', 'b', 'a']} />
      </div>
    )
  }
}